<template>
  <div>
    <div>
      <div class="button-area">
        <el-button @click="() => {this.$router.push({ name: 'newRole', params: { infoFlag: '0' } })}"
                   type="primary"
                   style="float:right"
                   size="small">新增</el-button>
      </div>
      <el-table ref="multipleTable"
                border
                stripe
                :data="roleList"
                tooltip-effect="dark"
                style="width: 100%">
        <el-table-column prop="roleName"
                         label="姓名"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="set(scope.row.roleId)"
                       type="text"
                       size="small">配置</el-button>
            <el-button @click="detail(scope.row.roleId)"
                       type="text"
                       size="small">详情</el-button>
            <el-button @click="del(scope.row.roleId)"
                       type="text"
                       size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
      </div>
    </div>
  </div>
</template>

<script>
import '@/style/common.scss'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  data() {
    return {
      name: null,
      phone: null,
      role: null,
      roleList: []
    }
  },
  activated() {
    this.getRoleList()
  },
  methods: {
    getRoleList() {
      this.$http.get(api.ROLE_LIST).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.roleList = res.result
            console.log(this.roleList)
          }
        }
      )
    },
    del(id) {
      this.$http.get(api.ROLE_DEL, { id: id }).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('删除成功！', 'success')
            this.getRoleList()
          }
        }
      )
    },
    set(id) {
      this.$router.push({
        name: 'setRole',
        params: { roleId: id, infoFlag: '0' }
      })
    },
    detail(id) {
      this.$router.push({
        name: 'roleInfo',
        params: { roleId: id, infoFlag: '1' }
      })
    }
  }
}
</script>
